import React, { useRef, forwardRef,useImperativeHandle, useEffect, useState } from 'react';

//Ref通信组件
// 使用 forwardRef 创建一个可接收 ref 的组件
const CustomInput = forwardRef((props, ref) => {
  // 使用 useImperativeHandle 暴露子组件的方法给父组件
  const [list,setList]=useState([])
    useImperativeHandle(ref, () => ({
      getChildState: (val) => {
        console.log('val', val);
        if(val){
            setList(val.arr)
        }else{
            setList([])
        }
        }
    }));
  return (
      <>
      <input type="text" />;
      {list.map((item, i) =>{return (
          <span key={i}> { item}</span>
      )}
      )}
       </>
  )
});
//父组件
const DataPage = () => {
    // 创建一个 ref 对象
    const inputRef = useRef(null);
    const handleClick = () => {
      // 通过 ref 访问子组件的 DOM 元素并传递数据
      inputRef.current.getChildState({name:111,arr:[1,2,3]});
    };

    return (
        <div>
            <CustomInput ref={inputRef} />
            <button onClick={handleClick}>聚焦自定义输入框</button>
        </div>
    );
};


export default DataPage;
